<template>
  <div class="registerInfo-container departmentManagement-container">
    <modules-title title-name="诊所信息"></modules-title>
    <div class="register-content">
      <div class="clinicInfo">
        <div class="clinicInfo-title"><span>诊所信息</span><div class="h1" @click="updateInfo">【修改】</div></div>
        <div class="clinicInfo-content">
          <el-form label-position="right" label-width="100px">
            <el-form-item label="诊所名称:">
              <span>{{hospital_name}}</span>
            </el-form-item>
            <el-form-item label="负责人姓名:">
              <span>{{register_name}}</span>
            </el-form-item>
            <el-form-item label="负责人手机:">
              <span>{{register_mobile}}</span>
            </el-form-item>
            <el-form-item label="诊所地址:">
              <span>{{province_name}}{{city_name}}{{district_name}}</span>
            </el-form-item>
            <el-form-item label="详细地址:">
              <span>{{address}}</span>
            </el-form-item>
            <el-form-item label="注册时间:">
              <span>{{created_at | dateFormat}}</span>
            </el-form-item>
          </el-form>
        </div>
      </div>
      <div class="qualifications">
        <div class="qualifications-title"><span>诊所资质</span></div>
        <div class="qualifications-content">
          <div>
            <el-upload
              class="avatar-uploader"
              :action="domain"
              :data="qiniuToken"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload">
              <img v-if="imageUrl" :src="imageUrl" class="avatar">
              <span class="el-upload-list__item-actions" v-if="imageUrl">
                 <span
                   class="el-upload-list__item-preview"
                   @click.stop="handlePictureCardPreview(imageUrl)"
                 >
                  <i class="el-icon-zoom-in"></i>
                 </span>
              </span>
              <div class="avatar" v-else>
                <div><i class="el-icon-plus avatar-uploader-icon"></i></div>
                <div><span>上传图片</span></div>
              </div>
            </el-upload>
            <div class="title"><span>*</span>营业执照</div>
          </div>
          <div style="margin-left: 20px">
            <el-upload
              class="avatar-uploader"
              :action="domain"
              :data="qiniuToken"
              :show-file-list="false"
              :on-success="handleAvatarSuccess1"
              :before-upload="beforeAvatarUpload1">
              <img v-if="imageUrl1" :src="imageUrl1" class="avatar">
              <span class="el-upload-list__item-actions" v-if="imageUrl1">
                 <span
                   class="el-upload-list__item-preview"
                   @click.stop="handlePictureCardPreview(imageUrl1)"
                 >
                  <i class="el-icon-zoom-in"></i>
                 </span>
              </span>
              <div class="avatar" v-else>
                <div><i class="el-icon-plus avatar-uploader-icon"></i></div>
                <div><span>上传图片</span></div>
              </div>
            </el-upload>
            <div class="title"><span>*</span>身份证正面</div>
          </div>
          <div style="margin-left: 20px">
            <el-upload
              class="avatar-uploader"
              :action="domain"
              :data="qiniuToken"
              :show-file-list="false"
              :on-success="handleAvatarSuccess2"
              :before-upload="beforeAvatarUpload2">
              <img v-if="imageUrl2" :src="imageUrl2" class="avatar">
              <span class="el-upload-list__item-actions" v-if="imageUrl2">
                 <span
                   class="el-upload-list__item-preview"
                   @click.stop="handlePictureCardPreview(imageUrl2)"
                 >
                  <i class="el-icon-zoom-in"></i>
                 </span>
              </span>
              <div class="avatar" v-else>
                <div><i class="el-icon-plus avatar-uploader-icon"></i></div>
                <div><span>上传图片</span></div>
              </div>
            </el-upload>
            <div class="title"><span>*</span>身份证反面</div>
          </div>
        </div>
      </div>
    </div>
    <el-dialog :visible.sync="isUpdate"
               :width="dialogWidth"
               title="修改信息">
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="110px" class="demo-ruleForm">
        <div class="content">
          <el-form-item label="诊所名称" prop="name">
            <el-col :span="16">
              <el-input v-model="ruleForm.name"></el-input>
            </el-col>
          </el-form-item>
          <el-form-item label="负责人姓名" prop="register_name">
            <el-col :span="16">
              <el-input v-model="ruleForm.register_name"></el-input>
            </el-col>
          </el-form-item>
          <el-form-item label="负责人手机号" prop="register_mobile">
            <el-col :span="16">
              <el-input v-model="ruleForm.register_mobile"></el-input>
            </el-col>
          </el-form-item>
          <el-form-item label="诊所地址" prop="location">
            <el-col :span="16">
              <el-cascader
                style="width:100%"
                ref="cascaderAddr"
                v-model="ruleForm.location"
                :props="{value:'label'}"
                :options="options"
                @change="handleChange"></el-cascader>
            </el-col>
          </el-form-item>
          <el-form-item label="详细地址" prop="address">
            <el-col :span="16">
              <el-input v-model="ruleForm.address"></el-input>
            </el-col>
          </el-form-item>
        </div>
      </el-form>
      <div class="footer">
        <el-button size="small" class="border-btn"  style="margin-left: 60px" @click="closeDialog()">取消</el-button>
        <el-button type="primary"  class="main-btn" size="small" @click="submitForm()">确定</el-button>
      </div>
    </el-dialog>
    <div class="preview">
      <el-dialog :visible.sync="dialogPreview">
        <img width="100%" :src="previewImageUrl" alt="">
      </el-dialog>
    </div>
  </div>
</template>
<script>
  import modulesTitle from "@/components/modulesTitle.vue";
  import {getQiniu} from "../../../api/common";
  import {getRegisterInfo,updateRegisterInfo} from "@/api/clinicManagement";
  import area from "../../../utils/area";
  export default {
    name: 'registerInfo',
    components: { modulesTitle },
    data () {
      //手机号校验
      var checkNumber = (rule, value, callback) => {
        if (value === "") {
          callback(new Error("请输入手机号"));
        } else {
          let regEn = /^1[3456789]\d{9}$/
          if (!regEn.test(value)) {
            callback(new Error('请输入正确手机号码'))
          }else {
            callback();
          }
        }
      }
      return {
        dialogPreview:false,
        previewImageUrl:'',
        dialogWidth:0,
        options:[],
        domain: "http://upload.qiniu.com", // 七牛云的上传地址
        qiniuToken: {}, //上传到七牛的token
        imageUrl:'',
        imageUrl1:'',
        imageUrl2:'',
        dialogImageUrl: '',
        dialogVisible: false,
        register_name:'',
        register_mobile:'',
        hospital_name:'',
        address:'',
        created_at:'',
        isUpdate:false,
        province_name:'',
        city_name:'',
        district_name:'',
        ruleForm:{
          register_name:'',
          register_mobile:'',
          name:'',
          location:[],
          address:'',
          province_id:'',
          city_id:'',
          district_id:'',
          province_name:'',
          city_name:'',
          district_name:'',
        },
        rules:{
          register_name:[
            { required: true, message: '请输入负责人姓名', trigger: 'blur' },
          ],
          register_mobile:[
            { required: true,  trigger: 'blur',validator:checkNumber },
          ],
          name: [
            { required: true, message: '请输入诊所名称', trigger: 'blur' },
          ],
          location: [
            { required: true, message: '请选择诊所地址', trigger: 'change' },
          ],
          address: [
            { required: true, message: '请填写详细地址', trigger: 'blur' },
          ],
        }
      }
    },
    created() {
      //监听弹窗宽度变化
     this.setDialogWidth()
      //获取注册信息
     this.getRegisterInfo();
     this.options = area.citys;
     console.log(this.options)
    },
    mounted() {
      //监听弹窗变化
      window.onresize = () => {
        return (() => {
          this.setDialogWidth()
        })()
      }
    },
    methods:{
      //弹窗宽度变化
      setDialogWidth() {
        console.log(document.body.clientWidth)
        var val = document.body.clientWidth
        const def = 800 // 默认宽度
        if (val < def) {
          this.dialogWidth = '100%'
        } else {
          this.dialogWidth = def + 'px'
        }
      },
      //选择地址
      handleChange:function (value) {
        console.log(value)
        this.ruleForm.province_id = value[0];
        this.ruleForm.city_id = value[1];
        this.ruleForm.district_id = value[2];
      },
      //获取注册信息
      getRegisterInfo(){
        getRegisterInfo().then(res=>{
          console.log(res.data)
          this.ID = res.data.ID
          this.register_name = res.data.register_name
          this.register_mobile = res.data.register_mobile
          this.hospital_name = res.data.hospital_name
          this.address = res.data.address
          this.created_at = res.data.created_at
          this.imageUrl = res.data.business_license
          this.imageUrl1 = res.data.id_card
          this.imageUrl2 = res.data.id_card_reverse
          this.city_name = res.data.city_name
          this.province_name = res.data.province_name
          this.district_name = res.data.district_name
          this.ruleForm.province_id = res.data.province_id
          this.ruleForm.city_id = res.data.city_id
          this.ruleForm.district_id = res.data.district_id
        })
      },
      //修改诊所信息
      updateInfo(){
        this.isUpdate = true
        this.ruleForm.register_name = this.register_name
        this.ruleForm.register_mobile = this.register_mobile
        this.ruleForm.name = this.hospital_name
        this.ruleForm.address = this.address
        this.ruleForm.location = [
          this.province_name.trim(),
          this.city_name.trim(),
          this.district_name.trim(),
        ]
        console.log(this.ruleForm.location)
      },
      //取消修改
      closeDialog(){
        this.isUpdate = false
      },
      //确定修改
      submitForm(){
        this.$refs.ruleForm.validate((valid) => {
          if (valid) {
            let thsAreaCode = this.$refs.cascaderAddr//注意2： 获取label值
            let list =thsAreaCode.presentText.split("/")
            this.ruleForm.province_name = list[0];
            this.ruleForm.city_name = list[1];
            this.ruleForm.district_name = list[2];
            console.log(this.ruleForm.province_name)
            let data={
              register_name:this.ruleForm.register_name,
              register_mobile:this.ruleForm.register_mobile,
              hospital_name:this.ruleForm.name,
              address:this.ruleForm.address,
              id_card:this.imageUrl1,
              business_license:this.imageUrl,
              province_id:Number(this.ruleForm.province_id),
              province_name:this.ruleForm.province_name,
              city_id:Number(this.ruleForm.province_id),
              city_name:this.ruleForm.city_name,
              district_id:Number(this.ruleForm.district_id),
              district_name:this.ruleForm.district_name
            }
            updateRegisterInfo(this.ID,data).then(res=>{
              if(res.code==200){
                this.$message.success('修改成功')
                this.getRegisterInfo();
                this.isUpdate = false
              }
            })
          } else {
            return false;
          }
        });
      },
      handleAvatarSuccess(res, file) {
        console.log(this.QINIU,file)
        this.imageUrl = this.QINIU.qiniu_url + "/" + res.key;
        console.log(this.imageUrl1)
        let data={
          register_mobile:this.register_mobile,
          hospital_name:this.hospital_name,
          address:this.ruleForm.address,
          id_card:this.imageUrl1,
          business_license:this.imageUrl,
          id_card_reverse:this.imageUrl2
        }
        updateRegisterInfo(this.ID,data).then(res=>{
          if(res.code==200){
            this.$message.success('修改成功')
            this.getRegisterInfo();
            this.isUpdate = false
          }
        })
      },
      handleAvatarSuccess1(res, file) {
        console.log(file)
        this.imageUrl1 = this.QINIU.qiniu_url + "/" + res.key;
        let data={
          register_mobile:this.register_mobile,
          hospital_name:this.hospital_name,
          address:this.ruleForm.address,
          id_card:this.imageUrl1,
          business_license:this.imageUrl,
          id_card_reverse:this.imageUrl2
        }
        updateRegisterInfo(this.ID,data).then(res=>{
          if(res.code==200){
            this.$message.success('修改成功')
            this.getRegisterInfo();
            this.isUpdate = false
          }
        })
      },
      handlePictureCardPreview(file) {
        console.log(file)
        this.dialogPreview = true;
        this.previewImageUrl = file;
      },
      handleAvatarSuccess2(res, file) {
        console.log(file)
        this.imageUrl2 = this.QINIU.qiniu_url + "/" + res.key;
        let data={
          register_mobile:this.register_mobile,
          hospital_name:this.hospital_name,
          address:this.ruleForm.address,
          id_card:this.imageUrl1,
          business_license:this.imageUrl,
          id_card_reverse:this.imageUrl2
        }
        updateRegisterInfo(this.ID,data).then(res=>{
          if(res.code==200){
            this.$message.success('修改成功')
            this.getRegisterInfo();
            this.isUpdate = false
          }
        })
      },
      beforeAvatarUpload(file) {
        const isJPGorPNG =
          file.type === "image/jpg" ||
          file.type === "image/jpeg" ||
          file.type === "image/png";
        const isLt2M = file.size / 1024 / 1024 < 15;

        if (!isJPGorPNG) {
          this.$message({
            type: "error",
            message: "上传图片只能是jpg、png、jpeg格式！",
            duration: 1500,
          });
          return false;
        }
        if (!isLt2M) {
          this.$message({
            type: "error",
            message: `上传图片大小不能超过15M!`,
            duration: 1500,
          });
          return false;
        }
        if (isJPGorPNG && isLt2M) {
          return getQiniu().then((res) => {
            this.qiniuToken = {
              token: res.data,
            };
          });
        }
      },
      beforeAvatarUpload2(file) {
        const isJPGorPNG =
          file.type === "image/jpg" ||
          file.type === "image/jpeg" ||
          file.type === "image/png";
        const isLt2M = file.size / 1024 / 1024 < 15;

        if (!isJPGorPNG) {
          this.$message({
            type: "error",
            message: "上传图片只能是jpg、png、jpeg格式！",
            duration: 1500,
          });
          return false;
        }
        if (!isLt2M) {
          this.$message({
            type: "error",
            message: `上传图片大小不能超过15M!`,
            duration: 1500,
          });
          return false;
        }
        if (isJPGorPNG && isLt2M) {
          return getQiniu().then((res) => {
            this.qiniuToken = {
              token: res.data,
            };
          });
        }
      },
      beforeAvatarUpload1(file) {
        const isJPGorPNG =
          file.type === "image/jpg" ||
          file.type === "image/jpeg" ||
          file.type === "image/png";
        const isLt2M = file.size / 1024 / 1024 < 15;

        if (!isJPGorPNG) {
          this.$message({
            type: "error",
            message: "上传图片只能是jpg、png、jpeg格式！",
            duration: 1500,
          });
          return false;
        }
        if (!isLt2M) {
          this.$message({
            type: "error",
            message: `上传图片大小不能超过15M!`,
            duration: 1500,
          });
          return false;
        }
        if (isJPGorPNG && isLt2M) {
          return getQiniu().then((res) => {
            this.qiniuToken = {
              token: res.data,
            };
          });
        }
      }
      }
      // //删除图片
      // handleRemove(file, fileList) {
      //   console.log(file, fileList);
      // },
      // //预览图片
      // handlePictureCardPreview(file) {
      //   this.dialogImageUrl = file.url;
      //   this.dialogVisible = true;
      // }
    // }
  }
</script>
<style lang="scss" scoped>
  @import "@/assets/scss/clinicManagement/modules/registerInfo.scss";
  @import "@/assets/scss/clinicManagement/modules/departmentManagement.scss";
</style>
<style>
  .el-dialog__header{
    border-bottom: 1px solid #E6E6E6;
  }
  .preview .el-dialog__header{
    border-bottom: none;
  }
  .avatar-uploader .el-upload {
    border: 1px dashed #3F909E;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #3F909E;
  }

  .avatar-uploader:hover span {
    color: #3F909E
  }

  .avatar-uploader:hover .el-upload-list__item-preview {
    display: block
  }

  .avatar-uploader .el-upload-list__item-preview {
    position: absolute;
    display: none;
    left: 44%;
    top: 44%;
    color: #3F909E!important;
  }

  .avatar-uploader .el-upload-list__item-preview .el-icon-zoom-in {
    font-size: 24px
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 89px;
    height: 89px;
    margin-top: 10px;
    line-height: 89px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>
